import React, { Component } from 'react'
import { Text, View, StyleSheet, Image, TouchableHighlight } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
import Global from '../qm_comp/Global'
class GameList extends Component {
    render() {
        return (
            <View>
                <Text> textInComponent </Text>
            </View>
        )
    }
}

const bannaImg = ['https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg']
export default class Home extends Component {
    constructor(props) {
        super(props)

        this.state = {
            allMusic: [],
            bannaSrc: { uri: bannaImg[0] },
        }
        this.fd = null
    }
    componentDidMount() {
        var that = this
        fetch('https://www.annjong.com/bcumusic/api/music/getAll')
        .then(res=>res.json())
        .then(res=>{
            console.log(res.obj);
            that.setState({
                allMusic:res.obj
            })
        })
        if (this.fd == null) {
            this.fd = setInterval(() => {
                let index = Math.floor(Math.random() * 5)
                let bannaSrc = this.state.bannaSrc
                bannaSrc.uri = bannaImg[index]
                this.setState({
                    bannaSrc
                })
            }, 3000)
        }
        // fetch('https://www.annjong.com/bcumusic/api/user/login?password='+1+'&userId='+1,
        // {
        //     method: 'POST',
        //     headers: {
        //       'Content-Type': 'application/json',
        //     },
        //   },
        // )
        // .then(res=>res.json())
        // .then(res=>{
        //     console.log(res);
        //     Global.UInfo = res.obj
        // })
    }
    componentWillUnmount() {
        clearInterval(this.fd)

    }
    
    _toDetail = games => {
        console.log(games.id);
        this.props.navigation.push('GameDetail', { id: games.id })
    }
    render() {
        return (
            <ScrollView>
                <Image style={styles.bannaImg} source={this.state.bannaSrc} />
                <View style={styles.btn}>
                    <View style={styles.btn_box}>
                        <Image style={{width:50,height:50,marginBottom:5}} source={require('../images/singer.png')}></Image>
                        <Text>歌手</Text>
                    </View>
                    <View style={styles.btn_box}>
                        <Image style={{width:50,height:50,marginBottom:5}} source={require('../images/paihang.png')}></Image>
                        <Text>排行</Text>
                    </View>
                    <View style={styles.btn_box}>
                        <Image style={{width:50,height:50,marginBottom:5}} source={require('../images/diantai.png')}></Image>
                        <Text>电台</Text>
                    </View>
                    <View style={styles.btn_box}>
                        <Image style={{width:50,height:50,marginBottom:5}} source={require('../images/together.png')}></Image>
                        <Text>一起</Text>
                    </View>
                </View>
                <View style={styles.Info_box}>
                    {this.state.allMusic.map((music,index)=>{
                        return <View style={styles.Info_item} key={index}>
                            <Image style={{width:60,height:60}} source={{uri:music.img}}></Image>
                            <Text>{music.name}</Text>
                        </View>
                    })}
                </View>
            </ScrollView>
        )
    }
}
const styles = StyleSheet.create({
    
    Info_item:{
        width:80,
        height:80,
        // backgroundColor:'red',
        marginTop:10,
        display:'flex',
        alignItems:'center'
    },  
    Info_box:{
        width:'90%',
        height:400,
        backgroundColor:'white',
        marginTop:20,
        alignSelf:'center',
        display:'flex',
        flexDirection:'row',
        flexWrap:'wrap',
        justifyContent:'space-between',
    },
    btn_box:{
        height:100,
        width:80,
        // backgroundColor:"white",r
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },  
    btn:{
        width:'100%',
        height:100,
        // backgroundColor:'red',
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-around'
    },
    bannaImg: {
        width: '100%',
        height: 200
    },
    
})
